<template>
  <div id="mainarea" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import "@/utils/china";
import resize from "./mixins/resize";
// import moment from "moment";
import moment from 'dayjs'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "mainarea",
    },
    width: {
      type: String,
      default: "1650px",
    },
    height: {
      type: String,
      default: "750px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: [Array, Object],
      required: false,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById("mainarea"));
      window.addEventListener("resize", function () {
        this.chart.resize();
      });
      // console.log(this.chart);

      this.setOptions(this.chartData);
      // this.chart
      //   .off("legendselectchanged")
      //   .on("legendselectchanged", function (params) {
      //     console.log(params);
      //   });
    },
    setOptions(list = []) {
      // let series = [];
      // series = list.map((i) => ({
      //   name: i.netIp,
      //   itemStyle: {
      //     normal: {
      //       // color: '#FF005A',
      //       lineStyle: {
      //         // color: '#FF005A',
      //         width: 2,
      //       },
      //     },
      //   },
      //   smooth: false,
      //   type: "line",
      //   data: i.nums,
      //   animationDuration: 2800,
      //   animationEasing: "cubicInOut",
      // }));
      // if (list.length == 0) {
      //   this.chart.setOption({});
      //   return false;
      // }
      // console.log(this.chartData, "chartData");
      // let legenddata = ["异常时间登录", "异常IP登录"];
      let legenddata = [{
        name:"异常时间登录",
        // icon:'none',
        itemStyle:{
          color:"#87c5f1",
          borderWidth:0,
          borderType:'dotted'
        }
      }, {
        name:"异常IP登录",
        // icon:'none',
        itemStyle:{
          color:"#87c5f1",
          borderWidth:0,
          borderType:'dotted'
        }
      },];
      let legendObj = {
        cutOverNum: "异常时间登录",
        onlineNum: "异常IP登录",
      };
      let {
        radiusDeviceCensusList,
        cutOverNumTotal,
        onlineNumTotal,
        censusTime,
      } = this.chartData;
      const total = cutOverNumTotal || 0 + onlineNumTotal || 0;
      radiusDeviceCensusList = radiusDeviceCensusList || [];
      let tooltipData = radiusDeviceCensusList.map((i) => i.areaName && i);
      let series = Object.keys(legendObj).map((i) => {
        return {
          name: legendObj[i],
          type: "map",
          mapType: "china",
          roam: false,
          // normal: {
          //   // areaColor: "#eee",
          //   // areaColor: "", //背景颜色
          //   label: { show: true },
          // },
          emphasis: { label: { show: true } },
          itemStyle: {
            normal: {
              areaColor: "#eee",
              // areaColor: "", //背景颜色
              opacity: 1,
              borderColor: "#999",
              borderWidth: 1,
              label: { show: true },
            },
            // emphasis: { label: { show: false } },
          },
          data: radiusDeviceCensusList.map((j) => ({
            name: j.areaName,
            value: j[i],
          })),
        };
      });
      const getmax = (list) => {
        if (Object.prototype.toString.call(list) == "[object Array]") {
          const nums = list.map((j) => {
            if (
              typeof j.cutOverNum === "number" &&
              typeof j.onlineNum === "number"
            ) {
              return j.cutOverNum + j.onlineNum;
            } else {
              return 0;
            }
          });
          // console.log(nums);
          return nums.sort((a, b) => b - a)[0];
        } else {
          return undefined;
        }
      };
      // console.log(series, "series");
      const max = getmax(radiusDeviceCensusList);
      const endTime = censusTime || moment().format("MM/DD HH:mm");
      let option = {
        title: {
          text: "风险统计",
          subtext: `统计时间 ${endTime}`,
          x: "center",
        },
        tooltip: {
          trigger: "item",
          x: "left",
          formatter: function (params, a, b, c) {
            if (tooltipData.findIndex((i) => i.areaName == params.name) != -1) {
              const data = tooltipData.find((i) => i.areaName == params.name);
              const tips =
                legendObj["cutOverNum"] +
                ": " +
                data["cutOverNum"] +
                "<br/>" +
                legendObj["onlineNum"] +
                ": " +
                data["onlineNum"] +
                "<br/>" +
                data.areaName;
              return tips;
            } else {
              return "";
            }
            // return params.data.name + ": " + params.data.value;
          },
          textStyle: {
            align: "left",
          },
        },
        legend: {
          orient: "vertical",
          x: "left",
          // icon:'none',
          // left:'0',
          data: legenddata,
          selectedMode: false,
          clickable: true,
          selected: {
            异常IP登录: true,
          },
        },
        visualMap: {
          color: censusTime
            ? [
                "#0b75de",
                "#489ce7",
                "#68b1ec",
                "#87c5f1",
                "#abddf7",
                "#c7eefb",
                "#e0ffff",
                // "#fff",
              ]
            : ["#eee"],
          min: 0,
          // max: total > 100000 ? total / 10 : total,
          max: max ? max : total,
          // max:radiusDeviceCensusList.map((i) => ({
          //   name: j.areaName,
          //   value: j[i],
          // })),
          text: ["高", "低"],
          x: "left",
          y: "bottom",
          calculable: true,
        },
        // dataRange: {
        //   min: 0,
        //   max: 2500,
        //   x: "left",
        //   y: "bottom",
        //   text: ["高", "低"], // 文本，默认为数值文本
        //   calculable: true,
        // },
        toolbox: {
          show: false,
          orient: "vertical",
          x: "right",
          y: "center",
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: true },
            myTool1: {
              show: false,
              title: "还原",
              // icon: "path://M906.368 242.944l11.050667-44.288a32 32 0 0 1 62.08 15.488l-30.933334 124.16a32 32 0 0 1-38.826666 23.338667l-124.16-30.976a32 32 0 0 1 15.445333-62.08l54.613333 13.610666A394.794667 394.794667 0 0 0 132.266667 523.776a32 32 0 1 1-63.914667 3.925333 458.794667 458.794667 0 0 1 837.973333-284.757333zM139.989333 747.434667l-18.517333 50.858666a32 32 0 1 1-60.16-21.888l43.776-120.277333a32 32 0 0 1 41.002667-19.114667l120.32 43.776a32 32 0 1 1-21.888 60.16l-42.197334-15.36a394.837333 394.837333 0 0 0 718.378667-208.725333 32 32 0 0 1 63.957333 2.730667 458.837333 458.837333 0 0 1-844.672 227.84z",
              // icon: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z",
              icon: "path://M512 97.52381a311.647086 311.647086 0 0 0-235.52 107.529752L248.549181 177.122743l-13.9264 97.523809 97.523809-13.9264-28.730514-28.730514 0.663162 0.565638A272.813105 272.813105 0 0 1 512 136.533333c150.576762 0 273.066667 122.489905 273.066667 273.066667s-122.489905 273.066667-273.066667 273.066667S238.933333 560.176762 238.933333 409.6H199.92381c0 172.07101 140.005181 312.07619 312.07619 312.07619s312.07619-140.005181 312.07619-312.07619S684.07101 97.52381 512 97.52381z",
              // icon: "image://http://example.website/a/b.png",
              // icon: "image://",
              onclick: () => {
                const chart = echarts.init(document.getElementById("mainarea"));
                // 还原
                chart.clear();
                chart.setOption(option);
                // this.setOptions(this.chartData);
                // // 传值
                that.$parent.arearefresh(false);
              },
            },
            // restore: { show: true },

            saveAsImage: { show: false },
          },
        },
        roamController: {
          show: true,
          x: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: series,
      };
      this.chart.setOption(option);
      let that = this;
      this.chart.off("click").on("click", function (params) {
        // const idx = params.dataIndex;
        // console.log(idx, params.name, params.value, params);
        // console.log(this, that);
        that.$parent.arearefresh(params);
      });
    },
  },
};
</script>
